if(document.body.offsetWidth>'668'){
    /*总体的轮播*/
    var swiper = new Swiper('.swiper-body.swiper-container',{
        direction : 'vertical',
        followFinger : false,
        speed:800,
        mousewheel: true,
        pagination : {
            el:'.navDv,.swiper-pagination',
            clickable: true,
        },
        on:{
            init:function(swiper){
                slide=this.slides.eq(0);
                slide.addClass('ani-slide');
            },
            transitionStart: function(){
                for(i=0;i<this.slides.length;i++){
                    slide=this.slides.eq(i);
                    slide.removeClass('ani-slide');
                }
            },
            transitionEnd: function(){
                slide=this.slides.eq(this.activeIndex);
                slide.addClass('ani-slide');
                
            },
        }
    });
}
var swiperNum = document.querySelector(".navDv")
var swiperLi = swiperNum.querySelectorAll(".swiper-pagination-bullet")
var arr11 = ["首页","关于我","技能掌握","我的经历","我的作品","联系我"]
for(var i =0;i<swiperLi.length;i++){
    console.log(swiperLi[i])
    var a = document.createElement("a")
    swiperLi[i].appendChild(a)
    a.innerHTML = arr11[i]
}


var body = document.querySelector("body")
var navInner = document.querySelector(".navInner")
var navBtn = document.querySelector(".navBtn")
var navBox = document.querySelector(".navBox")
navInner.onclick=function(){
    if (navBtn.className=="navBtn") {
        navBtn.classList.add("open")
        navBox.style="width:33vw;right:0;border-bottom-width: 100vh;"
        body.classList.add("bod")
        if(document.body.offsetWidth<='668'){
            navBox.style="width:90vw;right:0;border-bottom-width: 100vh;"  
        }
    }else{
        navBtn.classList.remove("open")
        navBox.style="width:0;right:-180px;"
        body.classList.remove("bod")
    }
}

var swiperSlide = document.querySelectorAll(".swiper-slide.Zinn")
var navBoxSp = document.querySelectorAll(".navBox span")
for(let i = 0;i<navBoxSp.length;i++){
    navBoxSp[i].onclick=function(){
        console.log(i)
        if(document.documentElement.scrollTop){
            document.documentElement.scrollTop = swiperSlide[i].offsetTop;
        }else{
            document.body.scrollTop = swiperSlide[i].offsetTop;
        }
        for(var j = 0;j<navBoxSp.length;j++){
            navBoxSp[j].classList.remove("active")
        }
        navBtn.classList.remove("open")
        navBox.style="width:0;right:-180px;"
        body.classList.remove("bod")
        navBoxSp[i].classList.add("active")
    }
}



let arr = [0,1,2,3,4];
let btn = 0;
var btns = document.querySelectorAll(".btns button")
var complete = document.querySelectorAll(".complete")
for(let i = 0;i<btns.length;i++){
	btns[i].index=i
	btns[i].onclick=function(){
        for(let j = 0;j<btns.length;j++){
            btns[j].classList.remove("Yes")
            complete[j].classList.remove("Yes")
        }
        arr.splice(btn,1,this.index)
        if(btn >= 5){
            btn = 0
        }else{
            btn++;
        }
        arr.length = 5;
        for(let k = 0;k<arr.length;k++){
            btns[arr[k]].classList.add("Yes")
            complete[arr[k]].classList.add("Yes")
        }
        
	}
}


var yuan = document.querySelectorAll(".Z-date i")
var yuanLi1 = document.querySelectorAll(".Z-date li")
var yuanLi2 = document.querySelectorAll(".Z-work li")
function ou(a,b){
	for(let i = 0;i<a.length;i++){
		a[i].onmouseover=function(){
			b[i].classList.add("active")
		}
		a[i].onmouseout=function(){
			b[i].classList.remove("active")
		}
	}
}
ou(yuanLi1,yuan)
ou(yuanLi2,yuan)




var coud = document.querySelector(".coud")
var coudLi = document.querySelectorAll(".coud li")
var coudI = document.querySelector(".inner .box i")
for(let i =0;i<coudLi.length;i++){
    coudLi[i].onclick=function(){
        coudI.innerText=this.innerText
        if(document.body.offsetWidth<='668'){
            for(var j = 0;j<coudLi.length;j++){
                coudLi[j].classList.remove("active")
            }
            this.classList.add("active")
        }
    }
}
var ZDateZ = document.querySelector(".Z-date")
var ZDate = document.querySelectorAll(".Z-date li")
var ZWork = document.querySelectorAll(".Z-work li")
function demo(a){
    setInterval(function(){
        if(coudI.innerText=="2018"){
            a[0].className = 'active'
            a[1].className = 'active'
            a[2].className = ''
        }else if(coudI.innerText=="2019"){
            a[0].className = ''
            a[1].className = ''
            a[2].className = 'active'
        }
    },1000)
}
demo(ZDate)
demo(ZWork)

    /**/



function das(a,b,c){
    var carousel=document.querySelector(b);
    var carouselImg=carousel.querySelectorAll('img');
    var carouselTxt = document.querySelectorAll(".carousel a .txtIcon")
    //文字
    var pagerArr = ["本网站","微信小程序","众力峰","攻防可视化","雍禾植发"];
    for(let i = 0;i<carouselTxt.length;i++){
        carouselTxt[i].innerText = pagerArr[i]
    }
    var pager = document.querySelector(c);
    var border=document.querySelector(a);
    //生成小图标
    for(var i = 0;i<carouselImg.length;i++){
        var a = document.createElement("a")
        a.href="javascript:;"
        a.className="thumb"+(i+1)
        var img = document.createElement("img")
        img.src=carouselImg[i].src;
        img.width="50";
        a.appendChild(img)
        pager.appendChild(a)
    }
    carousel.appendChild(carousel.firstElementChild.cloneNode(true));
    var carouselBtn=pager.querySelectorAll('a');
    carousel.style.height=carouselImg.length*carouselImg[0].offsetHeight+'px';
    var index=0;
    var xh=null;
    function autoPlay(){
        xh=setInterval(function(){
            if(index==-5){
                //给上一个原点背景改为白色
                carouselBtn[0].classList.remove("selected");
            }else{
                //给上一个原点背景改为白色
                carouselBtn[-index].classList.remove("selected");
            }
            index--;
            if(index==-6){
                index=-1;
                carousel.style.top='0px';
            }
           run(index*carouselImg[0].offsetHeight);
           if(index==-5){
               carouselBtn[0].classList.add("selected");
           }else{
               //给下一个原点背景改为红色
                carouselBtn[-index].classList.add("selected");
           }
        },3000);
    }
    autoPlay();
    var running=null;
    function run(num){
        clearInterval(running);
        running=setInterval(function(){
            //先算目标值与当前值得差距  /10
            var height=(num-carousel.offsetTop)/10;
            height=height>0?Math.ceil(height):Math.floor(height);
            //给ul的top赋值  =  当前值 + 本次移动的距离
            carousel.style.top=carousel.offsetTop+height+'px';
        },1000/40);
    }
    border.onmouseover=function(){
        clearInterval(xh);
    }
    border.onmouseout=function(){
        autoPlay();
    }
    //遍历小圆点  给每一个添加一个点击
    for(var i=0; i<carouselBtn.length;i++){
        //给每一个小圆点添加一个属性  属性值就是下标  这也是 原点与图片之间的关联所在
        carouselBtn[i].abc=i;
        carouselBtn[0].classList.add("selected")
        carouselBtn[i].onclick=function(){
            console.log(this.abc);
            //遍历清楚每一个圆点的背景
            for(var j=0;j<carouselBtn.length;j++){
                carouselBtn[j].classList.remove("selected");
            }
            this.classList.add("selected");
            run(-this.abc*carouselImg[0].offsetHeight);
            //让index=当前li的下标  那么下一次执行就会播放下一张   而不是上一张了
            index=-this.abc;
        }
    }
}
das(".left",".left .carousel",".left .pager")
das(".right",".right .carousel",".right .pager")

var iconIcon = document.querySelectorAll(".lian-lo .icon")
var iconImg = document.querySelectorAll(".lian-lo .icon span");
for(let i = 0;i<iconIcon.length;i++){
    iconIcon[i].index=i
    iconIcon[i].onmouseover=function(){
        iconImg[i].style.zIndex = '1'
    }
    iconIcon[i].onmouseout=function(){
        iconImg[i].style.zIndex = '-1'
    }
}


if(document.body.offsetWidth<='668'){
    var swiperBody = document.querySelector(".swiper-body")
    swiperBody.classList.remove("swiper-no-swiping")
    for(let i = 0;i<ZDate.length;i++){
        ZDate[i].style.height = ZWork[i].offsetHeight+'px'
    }
    coud.style.paddingLeft=ZDateZ.offsetWidth-8+"px"

    var swiper = new Swiper('.swiper-inner.swiper-container', {
        effect: 'cube',
        grabCursor: true,
        cubeEffect: {
            shadow: true,
            slideShadows: true,
            shadowOffset: 20,
            shadowScale: 0.94,
        },
        loop:true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });
    var head = document.querySelector(".head");
    var headTitle = document.querySelector(".head .head-title")
    window.onscroll=function(){
        scroll()
    }
    function scroll(){
        var he = document.documentElement.scrollTop + document.body.scrollTop;
        if(he>'180'){
            head.style.background = 'rgba(0,0,0,0.8)'
            headTitle.style.opacity = '1'
            setTimeout(function(){
                headTitle.style.display = 'block'
            },400)
        }else{
            head.style.background = 'transparent'
            headTitle.style.opacity = '0'
            setTimeout(function(){
                headTitle.style.display = 'none'
            },400)
        }
    }
    scroll()

}

// ZDate
// ZWork